<template>
    <div class="loginview">
        <div class="main">
            <audio @ended="black=false" src="https://ziyuan.windbless.top/sounds/lakk/%E9%80%89%E6%8B%A9%E4%BD%A0%E5%BF%83%E4%BB%AA%E7%9A%84%E8%A7%92%E8%89%B2%E6%9D%A5%E4%B8%80%E8%B5%B7%E9%97%AF%E5%85%B3%E5%90%A7%E3%80%82.mp3" ref="audioref"></audio>
        <div class="x" v-if="black"  @click="playaudio"></div>
            <div class="head">
                请你选择喜欢的角色吧！
            </div>
            <div class="choosebox" @click="chooseman">
                <div data-man="1" class="man">
                    <img data-man="1" src="@/static/man1.png" alt="">
                </div>
                <div data-man="2" class="man">
                    <img data-man="2" src="@/static/man2.png" alt="">
                </div>

            </div>
            <div class="start" v-if="choosenum" @click="start">
                开始冒险吧！{{ choosenum }}
            </div>
        </div>
    </div>
</template>
<script setup>
import api from '@/api/user'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
const black=ref(true);
const router = useRouter();
const route = useRoute();
//利用事件捕获获取点击盒子的data-man 
const choosenum = ref();
const audioref=ref(null);
const playaudio=()=>{
    audioref.value.play();
}
function chooseman(event) {
    const mannum = event.target.dataset.man;
    console.log(event.target);
    if (mannum == 1) {
        choosenum.value = "奥特曼"
    } else {
        choosenum.value = "爱丽莎"
    }
    console.log(choosenum.value);
}
const putcion = (data) => {
    try {
        return new Promise((resolve) => {

            api.putcion(data).then((res) => {
                console.log(res);
                resolve(1);
            })
        })
    } catch (error) {

    }

}
//开始冒险按钮  
const start = async () => {
   await putcion({
        "amountofcoinsobtained": 2,
        "reasonforobtainingcoins": `选择角色`
    })
    let data = {
        "id": route.query.id,
        "selectedrole": choosenum.value,
        "selectiontime": null

    }
    console.log(choosenum.value);
    api.putinfo(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
            router.push("/")
        }
    })
}
</script>
<style lang="scss" scoped>
.x{
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    background-color: black;
    z-index: 4;
    opacity: 0.4;
}
.loginview {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    gap: 2rem;

    .main {
        background-color: #a4936b;
        height: 80%;
        width: 80%;
        padding: 3rem;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;

        .start {
            font-size: 3rem;
            color: #fff;
        }

        .head {
            font-size: 2rem;
            color: #fff;
        }

        .choosebox {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10%;

            .man {
                height: 100%;
                width: 40%;
                transition: transform 0.3s ease;

                img {
                    width: 100%;
                    // height: 100%;
                }
            }

            .man:hover {
                transform: scale(1.1);
            }
        }
    }

}
</style>